<!--
 /**
 * Author: hongChengHao
 * Date: 2022-08-08 18:05
 * Desc: 页面名称
 */
-->
<template>
  <view>
    <!-- slot="header" -->
    <view>
      <view class="order-detail tc">
        <view class="flex-c flex-m mb35">
          <view class="order-detail__title">待支付</view>
          <yy-count-down
            ref="timeComplete"
            class="order-detail__time"
            :time="orderInfo.residueSeconds"
            :format="'HH:mm:ss'"
            @complete="timeComplete"
            @timeChange="onCountDownChange"
          >
            <view class="flex-s-m fc-white">
              <text class="time__hours">{{ timeData.hours }}</text>
              <text class="time__doc">:</text>
              <text class="time__minutes">{{ timeData.minutes }}</text>
              <text class="time__doc">:</text>
              <text class="time__seconds">{{ timeData.seconds }}</text>
            </view>
          </yy-count-down>
        </view>
        <view class="mall-shop">
          <view class="flex mb30">
            <zm-image
              :src="orderInfo.imageUrl"
              custom-style="width:134rpx;height:134rpx;margin-right:24rpx"
            ></zm-image>
            <view class="flex introduce">
              <view class="fb fs30">{{ orderInfo.name || '--' }}</view>
              <view>
                <text class="fs24">数量：</text>
                <span>{{ orderInfo.number || '--' }}</span>
              </view>
              <view>
                <text class="fs24">总价：</text>
                <price
                  :price="orderInfo.asPrice || '--'"
                  unit-size="24"
                  price-size="24"
                  custom-class="fb"
                  color="#FFB415"
                ></price>
              </view>
            </view>
          </view>
          <view
            class="zm-bor-t good-content pb5"
            v-if="orderInfo.package.length"
          >
            <view class="fs30 b pt15 pb10 tj">订单信息</view>
            <view
              class="flex flex-m flex-b pb5"
              v-for="(item, index) in orderInfo.package"
              :key="index"
            >
              <view>{{ item.name }}</view>
              <view class="gray">数量：{{ item.number }}份</view>
            </view>
          </view>
        </view>
        <view class="mt15 block pb15 order-content">
          <view class="fs30 mb30 fb tj">订单信息</view>
          <view class="flex flex-m mt10">
            <view class="gray order-content__label">订单号</view>
            <view>{{ orderInfo.orderNo }}</view>
          </view>
          <view class="flex flex-m mt10">
            <view class="gray order-content__label">下单时间</view>
            <view>{{ orderInfo.orderTime }}</view>
          </view>
          <view class="flex flex-m mt10">
            <view class="gray order-content__label">手机号码</view>
            <view>{{ orderInfo.mobile || orderInfo.lockMobile }}</view>
          </view>
          <view class="flex flex-m mt10">
            <view class="gray order-content__label">订单总额</view>
            <view>￥{{ orderInfo.asPrice || 0 }}</view>
          </view>
          <template
            v-if="
              orderInfo.couponPayPrice && orderInfo.couponPayPrice !== '0.00'
            "
          >
            <view class="fs30 mb30 fb tj mt20">支付信息</view>
            <view class="flex flex-m mb20">
              <view class="gray order-content__label">立减券</view>
              <view>-￥{{ orderInfo.couponPayPrice }}</view>
            </view>
          </template>
        </view>
      </view>
      <!--  slot="footer" -->
      <view class="footer-btn flex-a-m mt50">
        <view class="copy-pop__btn copy-pop__close" @click="onCancel"
          >取消订单</view
        >
        <view class="copy-pop__btn copy-pop__confirm" @click="onConfirm"
          >继续支付</view
        >
      </view>
    </view>
  </view>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  import judgePay from '@/mixins/judgePay.js'
  export default {
    name: 'wait-pay',
    components: { ZmImage, Price },
    mixins: [judgePay],
    props: {
      orderInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      console.log('orderinfo', this.orderInfo)
      console.log('orderinfo', this.orderInfo.package.length)
      return {
        timeData: {}
      }
    },
    computed: {},
    methods: {
      // 倒计时完成
      timeComplete() {
        this.onClose()
        // this.$emit('timeComplete')
      },
      onCountDownChange(e) {
        this.timeData = e
        this.timeData.hours =
          +this.timeData.hours < 10
            ? '0' + this.timeData.hours
            : this.timeData.hours
        this.timeData.minutes =
          +this.timeData.minutes < 10
            ? '0' + this.timeData.minutes
            : this.timeData.minutes
        this.timeData.seconds =
          +this.timeData.seconds < 10
            ? '0' + this.timeData.seconds
            : this.timeData.seconds
      },
      onClose() {
        const fromPath = this.$tools.getCurrentPage().fromPath
        if (fromPath !== 'pagesOrder/order/goodsList') {
          this.$msg.showModal('确定取消订单?').then(() => {
            this.$msg.loading()
            uni.$api.mall
              .cancelOrder({ orderId: this.orderInfo.orderId })
              .then(() => {
                this.$msg.hideLoading()
                this.$tools.navigateTo(-1)
              })
          })
        } else {
          this.$tools.navigateTo(-1)
        }
        // if (fromPath === 'pagesOrder/order/goodsList') {
        //   this.$tools.navigateTo(
        //     '/pagesOrder/order/goodsList',
        //     {},
        //     'redirectTo'
        //   )

        // } else {
        // this.$tools.navigateTo(-1)
        // }
      },
      onCancel() {
        this.$msg.showModal('确定取消订单?').then(() => {
          this.$msg.loading()
          uni.$api.mall
            .cancelOrder({ orderId: this.orderInfo.orderId })
            .then(() => {
              this.$msg.hideLoading()

              // 用于商品列表页刷新
              const pages = getCurrentPages() //页面栈
              const prePage = pages[pages.length - 2] //上一页
              prePage.$vm.reFresh = Math.random() //触发上一页监听器

              this.$tools.navigateTo(-1)
            })
        })
      },
      async onConfirm() {
        const query = {
          mallOrderId: this.orderInfo.orderId,
          orderType: 'mall',
          needPay: this.orderInfo.asPrice,
          ownPayStr: this.getOwnPayStr(),
          zoneId: this.zoneId || ''
        }
        console.log('dsdsd')
        this.$tools.navigateTo('/pagesOrder/pay/index', query)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .order-detail {
    &__title {
      color: #fff;
      font-size: 36rpx;
      text-align: center;
      margin-right: 10rpx;
      display: inline-block;
    }
    &__time {
      color: #fff;
      font-size: 36rpx;
      display: inline-block;
    }
  }
  .mall-shop {
    padding: 30rpx;
    background: #fff;
    box-sizing: border-box;
    border-radius: 20rpx;
    .introduce {
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      .num {
        color: #888;
      }
    }
  }
  .order-content {
    background: #fff;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
    &__label {
      width: 130rpx;
      margin-right: 15rpx;
      text-align: left;
    }
  }
  .label {
    font-size: 24rpx;
    width: 104rpx;
    color: #888;
  }
  .copy-pop {
    &__btn {
      width: 344upx;
      height: 100upx;
      line-height: 100upx;
      border-radius: 18upx;
      font-size: 36upx;
      font-family: PingFang SC;
      font-weight: 400;
      text-align: center;
    }
    &__close {
      background: #ffffff;
      border: 2upx solid #3bc5d2;
      color: #3bc5d2;
    }
    &__confirm {
      background: linear-gradient(to right, #55baff, #23e6d8);
      color: #ffff;
    }
  }
</style>
